<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2563261" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe721;</span>
                <div class="name">Driving</div>
                <div class="code-name">&amp;#xe721;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe722;</span>
                <div class="name">Parking</div>
                <div class="code-name">&amp;#xe722;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71e;</span>
                <div class="name">Stop</div>
                <div class="code-name">&amp;#xe71e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71f;</span>
                <div class="name">Suspend</div>
                <div class="code-name">&amp;#xe71f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe720;</span>
                <div class="name">Star</div>
                <div class="code-name">&amp;#xe720;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6db;</span>
                <div class="name">Close-Circle-Fill</div>
                <div class="code-name">&amp;#xe6db;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6dc;</span>
                <div class="name">Calendar</div>
                <div class="code-name">&amp;#xe6dc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6dd;</span>
                <div class="name">Set</div>
                <div class="code-name">&amp;#xe6dd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6de;</span>
                <div class="name">Folder Selected</div>
                <div class="code-name">&amp;#xe6de;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6df;</span>
                <div class="name">Arrow</div>
                <div class="code-name">&amp;#xe6df;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e0;</span>
                <div class="name">渣土车</div>
                <div class="code-name">&amp;#xe6e0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e1;</span>
                <div class="name">Folder</div>
                <div class="code-name">&amp;#xe6e1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e2;</span>
                <div class="name">Hide</div>
                <div class="code-name">&amp;#xe6e2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e3;</span>
                <div class="name">Direction</div>
                <div class="code-name">&amp;#xe6e3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e4;</span>
                <div class="name">Show</div>
                <div class="code-name">&amp;#xe6e4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e5;</span>
                <div class="name">危化品车</div>
                <div class="code-name">&amp;#xe6e5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e6;</span>
                <div class="name">Open</div>
                <div class="code-name">&amp;#xe6e6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e7;</span>
                <div class="name">旅游包车</div>
                <div class="code-name">&amp;#xe6e7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e8;</span>
                <div class="name">Control</div>
                <div class="code-name">&amp;#xe6e8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e9;</span>
                <div class="name">Fix</div>
                <div class="code-name">&amp;#xe6e9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ea;</span>
                <div class="name">Menu-Unflod</div>
                <div class="code-name">&amp;#xe6ea;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6eb;</span>
                <div class="name">Plus</div>
                <div class="code-name">&amp;#xe6eb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ec;</span>
                <div class="name">Menu-Flod</div>
                <div class="code-name">&amp;#xe6ec;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ed;</span>
                <div class="name">Signal</div>
                <div class="code-name">&amp;#xe6ed;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ee;</span>
                <div class="name">Storage</div>
                <div class="code-name">&amp;#xe6ee;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ef;</span>
                <div class="name">New-Windows</div>
                <div class="code-name">&amp;#xe6ef;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f0;</span>
                <div class="name">DoubleRight</div>
                <div class="code-name">&amp;#xe6f0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f1;</span>
                <div class="name">Next</div>
                <div class="code-name">&amp;#xe6f1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f2;</span>
                <div class="name">Auto</div>
                <div class="code-name">&amp;#xe6f2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f3;</span>
                <div class="name">Parameter</div>
                <div class="code-name">&amp;#xe6f3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f4;</span>
                <div class="name">Management</div>
                <div class="code-name">&amp;#xe6f4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f5;</span>
                <div class="name">Trush</div>
                <div class="code-name">&amp;#xe6f5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f6;</span>
                <div class="name">No-Signal</div>
                <div class="code-name">&amp;#xe6f6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f7;</span>
                <div class="name">Dashboard</div>
                <div class="code-name">&amp;#xe6f7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f8;</span>
                <div class="name">Last</div>
                <div class="code-name">&amp;#xe6f8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f9;</span>
                <div class="name">bluetooth-On</div>
                <div class="code-name">&amp;#xe6f9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fa;</span>
                <div class="name">DoubleLeft</div>
                <div class="code-name">&amp;#xe6fa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fb;</span>
                <div class="name">设置</div>
                <div class="code-name">&amp;#xe6fb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fc;</span>
                <div class="name">视频</div>
                <div class="code-name">&amp;#xe6fc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fd;</span>
                <div class="name">工具</div>
                <div class="code-name">&amp;#xe6fd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fe;</span>
                <div class="name">Time-Circle-Line</div>
                <div class="code-name">&amp;#xe6fe;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ff;</span>
                <div class="name">班线客车</div>
                <div class="code-name">&amp;#xe6ff;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe700;</span>
                <div class="name">Window</div>
                <div class="code-name">&amp;#xe700;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe701;</span>
                <div class="name">Down</div>
                <div class="code-name">&amp;#xe701;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe702;</span>
                <div class="name">Car</div>
                <div class="code-name">&amp;#xe702;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe703;</span>
                <div class="name">File</div>
                <div class="code-name">&amp;#xe703;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe704;</span>
                <div class="name">Bluetooth</div>
                <div class="code-name">&amp;#xe704;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe705;</span>
                <div class="name">Up</div>
                <div class="code-name">&amp;#xe705;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe706;</span>
                <div class="name">Wi-Fi</div>
                <div class="code-name">&amp;#xe706;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe707;</span>
                <div class="name">ACC</div>
                <div class="code-name">&amp;#xe707;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe708;</span>
                <div class="name">报警</div>
                <div class="code-name">&amp;#xe708;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe709;</span>
                <div class="name">left</div>
                <div class="code-name">&amp;#xe709;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70a;</span>
                <div class="name">Drive</div>
                <div class="code-name">&amp;#xe70a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70b;</span>
                <div class="name">路况</div>
                <div class="code-name">&amp;#xe70b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70c;</span>
                <div class="name">Video</div>
                <div class="code-name">&amp;#xe70c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70d;</span>
                <div class="name">Link</div>
                <div class="code-name">&amp;#xe70d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70e;</span>
                <div class="name">车种</div>
                <div class="code-name">&amp;#xe70e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70f;</span>
                <div class="name">Sort-Up</div>
                <div class="code-name">&amp;#xe70f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe710;</span>
                <div class="name">Power-Off</div>
                <div class="code-name">&amp;#xe710;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe711;</span>
                <div class="name">Right</div>
                <div class="code-name">&amp;#xe711;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe712;</span>
                <div class="name">区划</div>
                <div class="code-name">&amp;#xe712;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe713;</span>
                <div class="name">More</div>
                <div class="code-name">&amp;#xe713;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe714;</span>
                <div class="name">Sort-Down</div>
                <div class="code-name">&amp;#xe714;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe715;</span>
                <div class="name">Sort</div>
                <div class="code-name">&amp;#xe715;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe716;</span>
                <div class="name">Question-Circle-Line</div>
                <div class="code-name">&amp;#xe716;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe717;</span>
                <div class="name">Cycle</div>
                <div class="code-name">&amp;#xe717;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe718;</span>
                <div class="name">Change-People</div>
                <div class="code-name">&amp;#xe718;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe719;</span>
                <div class="name">Options</div>
                <div class="code-name">&amp;#xe719;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71a;</span>
                <div class="name">Scan</div>
                <div class="code-name">&amp;#xe71a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71b;</span>
                <div class="name">Change-Car</div>
                <div class="code-name">&amp;#xe71b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71c;</span>
                <div class="name">plus-square</div>
                <div class="code-name">&amp;#xe71c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71d;</span>
                <div class="name">Web</div>
                <div class="code-name">&amp;#xe71d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6bd;</span>
                <div class="name">Delete</div>
                <div class="code-name">&amp;#xe6bd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6be;</span>
                <div class="name">Share</div>
                <div class="code-name">&amp;#xe6be;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6bf;</span>
                <div class="name">Editor</div>
                <div class="code-name">&amp;#xe6bf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c0;</span>
                <div class="name">Attachment</div>
                <div class="code-name">&amp;#xe6c0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c1;</span>
                <div class="name">Lock-Unlock</div>
                <div class="code-name">&amp;#xe6c1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c2;</span>
                <div class="name">Edit</div>
                <div class="code-name">&amp;#xe6c2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c3;</span>
                <div class="name">Lock</div>
                <div class="code-name">&amp;#xe6c3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c4;</span>
                <div class="name">Message</div>
                <div class="code-name">&amp;#xe6c4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c5;</span>
                <div class="name">Lock-Lock</div>
                <div class="code-name">&amp;#xe6c5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c6;</span>
                <div class="name">Container</div>
                <div class="code-name">&amp;#xe6c6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c7;</span>
                <div class="name">User</div>
                <div class="code-name">&amp;#xe6c7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c8;</span>
                <div class="name">QR Code</div>
                <div class="code-name">&amp;#xe6c8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c9;</span>
                <div class="name">Phone</div>
                <div class="code-name">&amp;#xe6c9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ca;</span>
                <div class="name">Member-Group</div>
                <div class="code-name">&amp;#xe6ca;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6cb;</span>
                <div class="name">Download</div>
                <div class="code-name">&amp;#xe6cb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6cc;</span>
                <div class="name">Member-minus</div>
                <div class="code-name">&amp;#xe6cc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6cd;</span>
                <div class="name">Reminder</div>
                <div class="code-name">&amp;#xe6cd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ce;</span>
                <div class="name">Mail</div>
                <div class="code-name">&amp;#xe6ce;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6cf;</span>
                <div class="name">Upload</div>
                <div class="code-name">&amp;#xe6cf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d0;</span>
                <div class="name">Member</div>
                <div class="code-name">&amp;#xe6d0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d1;</span>
                <div class="name">Member-Plus</div>
                <div class="code-name">&amp;#xe6d1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d2;</span>
                <div class="name">Reload</div>
                <div class="code-name">&amp;#xe6d2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d3;</span>
                <div class="name">Video Selected</div>
                <div class="code-name">&amp;#xe6d3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d4;</span>
                <div class="name">Change</div>
                <div class="code-name">&amp;#xe6d4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d5;</span>
                <div class="name">Location Unselected</div>
                <div class="code-name">&amp;#xe6d5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d6;</span>
                <div class="name">Close</div>
                <div class="code-name">&amp;#xe6d6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d7;</span>
                <div class="name">Video Unselected</div>
                <div class="code-name">&amp;#xe6d7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d8;</span>
                <div class="name">Star Unselected</div>
                <div class="code-name">&amp;#xe6d8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d9;</span>
                <div class="name">Location Selected</div>
                <div class="code-name">&amp;#xe6d9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6da;</span>
                <div class="name">Star Selected</div>
                <div class="code-name">&amp;#xe6da;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe683;</span>
                <div class="name">DoubleRight</div>
                <div class="code-name">&amp;#xe683;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68f;</span>
                <div class="name">Warning-Circle-Fill</div>
                <div class="code-name">&amp;#xe68f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe690;</span>
                <div class="name">多选框-部分选中</div>
                <div class="code-name">&amp;#xe690;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe691;</span>
                <div class="name">Sidebar-预警中心</div>
                <div class="code-name">&amp;#xe691;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe692;</span>
                <div class="name">Info-Circle-Fill</div>
                <div class="code-name">&amp;#xe692;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe693;</span>
                <div class="name">Check</div>
                <div class="code-name">&amp;#xe693;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe694;</span>
                <div class="name">Sidebar-监控中心</div>
                <div class="code-name">&amp;#xe694;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe695;</span>
                <div class="name">单选框-失效</div>
                <div class="code-name">&amp;#xe695;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe696;</span>
                <div class="name">Search</div>
                <div class="code-name">&amp;#xe696;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe697;</span>
                <div class="name">Warning-Circle-Fill</div>
                <div class="code-name">&amp;#xe697;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe698;</span>
                <div class="name">多选框-选中</div>
                <div class="code-name">&amp;#xe698;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe699;</span>
                <div class="name">多选框-失效</div>
                <div class="code-name">&amp;#xe699;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69a;</span>
                <div class="name">Warning-Circle-Line</div>
                <div class="code-name">&amp;#xe69a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69b;</span>
                <div class="name">Sidebar-管理中心</div>
                <div class="code-name">&amp;#xe69b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69c;</span>
                <div class="name">Close-Circle-Line</div>
                <div class="code-name">&amp;#xe69c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69d;</span>
                <div class="name">多选框-选中失效</div>
                <div class="code-name">&amp;#xe69d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69e;</span>
                <div class="name">Sidebar-设置中心</div>
                <div class="code-name">&amp;#xe69e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69f;</span>
                <div class="name">Operation-Camera</div>
                <div class="code-name">&amp;#xe69f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a0;</span>
                <div class="name">Safe-Circle-Fill</div>
                <div class="code-name">&amp;#xe6a0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a1;</span>
                <div class="name">单选框-未选中</div>
                <div class="code-name">&amp;#xe6a1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a2;</span>
                <div class="name">Operation-Check</div>
                <div class="code-name">&amp;#xe6a2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a3;</span>
                <div class="name">单选框-选中失效</div>
                <div class="code-name">&amp;#xe6a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a4;</span>
                <div class="name">Organize</div>
                <div class="code-name">&amp;#xe6a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a5;</span>
                <div class="name">Info-Circle-Line</div>
                <div class="code-name">&amp;#xe6a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a6;</span>
                <div class="name">多选框-悬停</div>
                <div class="code-name">&amp;#xe6a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a7;</span>
                <div class="name">Sound-Harf</div>
                <div class="code-name">&amp;#xe6a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a8;</span>
                <div class="name">Sidebar-学习中心</div>
                <div class="code-name">&amp;#xe6a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a9;</span>
                <div class="name">Operation-Listen</div>
                <div class="code-name">&amp;#xe6a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6aa;</span>
                <div class="name">Sound-Off</div>
                <div class="code-name">&amp;#xe6aa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ab;</span>
                <div class="name">Operation-Message</div>
                <div class="code-name">&amp;#xe6ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ac;</span>
                <div class="name">Sidebar-工作台</div>
                <div class="code-name">&amp;#xe6ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ad;</span>
                <div class="name">Time-Circle-Fill</div>
                <div class="code-name">&amp;#xe6ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ae;</span>
                <div class="name">单选框-悬停</div>
                <div class="code-name">&amp;#xe6ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6af;</span>
                <div class="name">多选框-未选中</div>
                <div class="code-name">&amp;#xe6af;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b0;</span>
                <div class="name">Exclaimination</div>
                <div class="code-name">&amp;#xe6b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b1;</span>
                <div class="name">Question-Circle-Fill</div>
                <div class="code-name">&amp;#xe6b1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b2;</span>
                <div class="name">Operation-Trajectory</div>
                <div class="code-name">&amp;#xe6b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b3;</span>
                <div class="name">Sidebar-配置中心</div>
                <div class="code-name">&amp;#xe6b3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b4;</span>
                <div class="name">Operation-Siring</div>
                <div class="code-name">&amp;#xe6b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b5;</span>
                <div class="name">Sound-On</div>
                <div class="code-name">&amp;#xe6b5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b6;</span>
                <div class="name">Sidebar-数据中心</div>
                <div class="code-name">&amp;#xe6b6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b7;</span>
                <div class="name">Operation-Siri</div>
                <div class="code-name">&amp;#xe6b7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b8;</span>
                <div class="name">Check-Circle-Fill</div>
                <div class="code-name">&amp;#xe6b8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b9;</span>
                <div class="name">Operation-Mark</div>
                <div class="code-name">&amp;#xe6b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ba;</span>
                <div class="name">Check-Circle-Line</div>
                <div class="code-name">&amp;#xe6ba;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6bb;</span>
                <div class="name">Save</div>
                <div class="code-name">&amp;#xe6bb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6bc;</span>
                <div class="name">单选框-选中</div>
                <div class="code-name">&amp;#xe6bc;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1630724451933') format('woff2'),
       url('iconfont.woff?t=1630724451933') format('woff'),
       url('iconfont.ttf?t=1630724451933') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-Driving"></span>
            <div class="name">
              Driving
            </div>
            <div class="code-name">.icon-Driving
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Parking"></span>
            <div class="name">
              Parking
            </div>
            <div class="code-name">.icon-Parking
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Stop"></span>
            <div class="name">
              Stop
            </div>
            <div class="code-name">.icon-Stop
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Suspend"></span>
            <div class="name">
              Suspend
            </div>
            <div class="code-name">.icon-Suspend
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Star"></span>
            <div class="name">
              Star
            </div>
            <div class="code-name">.icon-Star
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Close-Circle-Fill"></span>
            <div class="name">
              Close-Circle-Fill
            </div>
            <div class="code-name">.icon-Close-Circle-Fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Calendar"></span>
            <div class="name">
              Calendar
            </div>
            <div class="code-name">.icon-Calendar
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Set"></span>
            <div class="name">
              Set
            </div>
            <div class="code-name">.icon-Set
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-FolderSelected"></span>
            <div class="name">
              Folder Selected
            </div>
            <div class="code-name">.icon-a-FolderSelected
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Arrow"></span>
            <div class="name">
              Arrow
            </div>
            <div class="code-name">.icon-Arrow
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhatuche"></span>
            <div class="name">
              渣土车
            </div>
            <div class="code-name">.icon-zhatuche
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Folder"></span>
            <div class="name">
              Folder
            </div>
            <div class="code-name">.icon-Folder
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Hide"></span>
            <div class="name">
              Hide
            </div>
            <div class="code-name">.icon-Hide
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Direction"></span>
            <div class="name">
              Direction
            </div>
            <div class="code-name">.icon-Direction
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Show"></span>
            <div class="name">
              Show
            </div>
            <div class="code-name">.icon-Show
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weihuapinche"></span>
            <div class="name">
              危化品车
            </div>
            <div class="code-name">.icon-weihuapinche
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Open"></span>
            <div class="name">
              Open
            </div>
            <div class="code-name">.icon-Open
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lvyoubaoche"></span>
            <div class="name">
              旅游包车
            </div>
            <div class="code-name">.icon-lvyoubaoche
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Control"></span>
            <div class="name">
              Control
            </div>
            <div class="code-name">.icon-Control
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Fix"></span>
            <div class="name">
              Fix
            </div>
            <div class="code-name">.icon-Fix
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Menu-Unflod"></span>
            <div class="name">
              Menu-Unflod
            </div>
            <div class="code-name">.icon-Menu-Unflod
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Plus"></span>
            <div class="name">
              Plus
            </div>
            <div class="code-name">.icon-Plus
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Menu-Flod"></span>
            <div class="name">
              Menu-Flod
            </div>
            <div class="code-name">.icon-Menu-Flod
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Signal"></span>
            <div class="name">
              Signal
            </div>
            <div class="code-name">.icon-Signal
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Storage"></span>
            <div class="name">
              Storage
            </div>
            <div class="code-name">.icon-Storage
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-New-Windows"></span>
            <div class="name">
              New-Windows
            </div>
            <div class="code-name">.icon-New-Windows
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-DoubleRight1"></span>
            <div class="name">
              DoubleRight
            </div>
            <div class="code-name">.icon-DoubleRight1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Next"></span>
            <div class="name">
              Next
            </div>
            <div class="code-name">.icon-Next
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Auto"></span>
            <div class="name">
              Auto
            </div>
            <div class="code-name">.icon-Auto
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Parameter"></span>
            <div class="name">
              Parameter
            </div>
            <div class="code-name">.icon-Parameter
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Management"></span>
            <div class="name">
              Management
            </div>
            <div class="code-name">.icon-Management
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Trush"></span>
            <div class="name">
              Trush
            </div>
            <div class="code-name">.icon-Trush
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-No-Signal"></span>
            <div class="name">
              No-Signal
            </div>
            <div class="code-name">.icon-No-Signal
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Dashboard"></span>
            <div class="name">
              Dashboard
            </div>
            <div class="code-name">.icon-Dashboard
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Last"></span>
            <div class="name">
              Last
            </div>
            <div class="code-name">.icon-Last
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bluetooth-On"></span>
            <div class="name">
              bluetooth-On
            </div>
            <div class="code-name">.icon-bluetooth-On
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-DoubleLeft"></span>
            <div class="name">
              DoubleLeft
            </div>
            <div class="code-name">.icon-DoubleLeft
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shezhi"></span>
            <div class="name">
              设置
            </div>
            <div class="code-name">.icon-shezhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shipin"></span>
            <div class="name">
              视频
            </div>
            <div class="code-name">.icon-shipin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gongju"></span>
            <div class="name">
              工具
            </div>
            <div class="code-name">.icon-gongju
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Time-Circle-Line"></span>
            <div class="name">
              Time-Circle-Line
            </div>
            <div class="code-name">.icon-Time-Circle-Line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-banxiankeche"></span>
            <div class="name">
              班线客车
            </div>
            <div class="code-name">.icon-banxiankeche
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Window"></span>
            <div class="name">
              Window
            </div>
            <div class="code-name">.icon-Window
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Down"></span>
            <div class="name">
              Down
            </div>
            <div class="code-name">.icon-Down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Car"></span>
            <div class="name">
              Car
            </div>
            <div class="code-name">.icon-Car
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-File"></span>
            <div class="name">
              File
            </div>
            <div class="code-name">.icon-File
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Bluetooth"></span>
            <div class="name">
              Bluetooth
            </div>
            <div class="code-name">.icon-Bluetooth
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Up"></span>
            <div class="name">
              Up
            </div>
            <div class="code-name">.icon-Up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Wi-Fi"></span>
            <div class="name">
              Wi-Fi
            </div>
            <div class="code-name">.icon-Wi-Fi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ACC"></span>
            <div class="name">
              ACC
            </div>
            <div class="code-name">.icon-ACC
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-baojing"></span>
            <div class="name">
              报警
            </div>
            <div class="code-name">.icon-baojing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-left"></span>
            <div class="name">
              left
            </div>
            <div class="code-name">.icon-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Drive"></span>
            <div class="name">
              Drive
            </div>
            <div class="code-name">.icon-Drive
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lukuang"></span>
            <div class="name">
              路况
            </div>
            <div class="code-name">.icon-lukuang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Video"></span>
            <div class="name">
              Video
            </div>
            <div class="code-name">.icon-Video
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Link"></span>
            <div class="name">
              Link
            </div>
            <div class="code-name">.icon-Link
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chezhong"></span>
            <div class="name">
              车种
            </div>
            <div class="code-name">.icon-chezhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Sort-Up"></span>
            <div class="name">
              Sort-Up
            </div>
            <div class="code-name">.icon-Sort-Up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Power-Off"></span>
            <div class="name">
              Power-Off
            </div>
            <div class="code-name">.icon-Power-Off
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Right"></span>
            <div class="name">
              Right
            </div>
            <div class="code-name">.icon-Right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-quhua"></span>
            <div class="name">
              区划
            </div>
            <div class="code-name">.icon-quhua
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-More"></span>
            <div class="name">
              More
            </div>
            <div class="code-name">.icon-More
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Sort-Down"></span>
            <div class="name">
              Sort-Down
            </div>
            <div class="code-name">.icon-Sort-Down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Sort"></span>
            <div class="name">
              Sort
            </div>
            <div class="code-name">.icon-Sort
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Question-Circle-Line"></span>
            <div class="name">
              Question-Circle-Line
            </div>
            <div class="code-name">.icon-Question-Circle-Line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Cycle"></span>
            <div class="name">
              Cycle
            </div>
            <div class="code-name">.icon-Cycle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Change-People"></span>
            <div class="name">
              Change-People
            </div>
            <div class="code-name">.icon-Change-People
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Options"></span>
            <div class="name">
              Options
            </div>
            <div class="code-name">.icon-Options
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Scan"></span>
            <div class="name">
              Scan
            </div>
            <div class="code-name">.icon-Scan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Change-Car"></span>
            <div class="name">
              Change-Car
            </div>
            <div class="code-name">.icon-Change-Car
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-plus-square"></span>
            <div class="name">
              plus-square
            </div>
            <div class="code-name">.icon-plus-square
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Web"></span>
            <div class="name">
              Web
            </div>
            <div class="code-name">.icon-Web
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Delete"></span>
            <div class="name">
              Delete
            </div>
            <div class="code-name">.icon-Delete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Share"></span>
            <div class="name">
              Share
            </div>
            <div class="code-name">.icon-Share
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Editor"></span>
            <div class="name">
              Editor
            </div>
            <div class="code-name">.icon-Editor
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Attachment"></span>
            <div class="name">
              Attachment
            </div>
            <div class="code-name">.icon-Attachment
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Lock-Unlock"></span>
            <div class="name">
              Lock-Unlock
            </div>
            <div class="code-name">.icon-Lock-Unlock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Edit"></span>
            <div class="name">
              Edit
            </div>
            <div class="code-name">.icon-Edit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Lock"></span>
            <div class="name">
              Lock
            </div>
            <div class="code-name">.icon-Lock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Message"></span>
            <div class="name">
              Message
            </div>
            <div class="code-name">.icon-Message
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Lock-Lock"></span>
            <div class="name">
              Lock-Lock
            </div>
            <div class="code-name">.icon-Lock-Lock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Container"></span>
            <div class="name">
              Container
            </div>
            <div class="code-name">.icon-Container
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-User"></span>
            <div class="name">
              User
            </div>
            <div class="code-name">.icon-User
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-QRCode"></span>
            <div class="name">
              QR Code
            </div>
            <div class="code-name">.icon-a-QRCode
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Phone"></span>
            <div class="name">
              Phone
            </div>
            <div class="code-name">.icon-Phone
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Member-Group"></span>
            <div class="name">
              Member-Group
            </div>
            <div class="code-name">.icon-Member-Group
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Download"></span>
            <div class="name">
              Download
            </div>
            <div class="code-name">.icon-Download
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Member-minus"></span>
            <div class="name">
              Member-minus
            </div>
            <div class="code-name">.icon-Member-minus
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Reminder"></span>
            <div class="name">
              Reminder
            </div>
            <div class="code-name">.icon-Reminder
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Mail"></span>
            <div class="name">
              Mail
            </div>
            <div class="code-name">.icon-Mail
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Upload"></span>
            <div class="name">
              Upload
            </div>
            <div class="code-name">.icon-Upload
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Member"></span>
            <div class="name">
              Member
            </div>
            <div class="code-name">.icon-Member
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Member-Plus"></span>
            <div class="name">
              Member-Plus
            </div>
            <div class="code-name">.icon-Member-Plus
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Reload"></span>
            <div class="name">
              Reload
            </div>
            <div class="code-name">.icon-Reload
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-VideoSelected"></span>
            <div class="name">
              Video Selected
            </div>
            <div class="code-name">.icon-a-VideoSelected
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Change"></span>
            <div class="name">
              Change
            </div>
            <div class="code-name">.icon-Change
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-LocationUnselected"></span>
            <div class="name">
              Location Unselected
            </div>
            <div class="code-name">.icon-a-LocationUnselected
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Close"></span>
            <div class="name">
              Close
            </div>
            <div class="code-name">.icon-Close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-VideoUnselected"></span>
            <div class="name">
              Video Unselected
            </div>
            <div class="code-name">.icon-a-VideoUnselected
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-StarUnselected"></span>
            <div class="name">
              Star Unselected
            </div>
            <div class="code-name">.icon-a-StarUnselected
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-LocationSelected"></span>
            <div class="name">
              Location Selected
            </div>
            <div class="code-name">.icon-a-LocationSelected
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-StarSelected"></span>
            <div class="name">
              Star Selected
            </div>
            <div class="code-name">.icon-a-StarSelected
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-DoubleRight"></span>
            <div class="name">
              DoubleRight
            </div>
            <div class="code-name">.icon-DoubleRight
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Warning-Circle-Fill1"></span>
            <div class="name">
              Warning-Circle-Fill
            </div>
            <div class="code-name">.icon-Warning-Circle-Fill1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-duoxuankuang-bufenxuanzhong"></span>
            <div class="name">
              多选框-部分选中
            </div>
            <div class="code-name">.icon-duoxuankuang-bufenxuanzhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Sidebar-yujingzhongxin"></span>
            <div class="name">
              Sidebar-预警中心
            </div>
            <div class="code-name">.icon-Sidebar-yujingzhongxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Info-Circle-Fill"></span>
            <div class="name">
              Info-Circle-Fill
            </div>
            <div class="code-name">.icon-Info-Circle-Fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Check"></span>
            <div class="name">
              Check
            </div>
            <div class="code-name">.icon-Check
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Sidebar-jiankongzhongxin"></span>
            <div class="name">
              Sidebar-监控中心
            </div>
            <div class="code-name">.icon-Sidebar-jiankongzhongxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-danxuankuang-shixiao"></span>
            <div class="name">
              单选框-失效
            </div>
            <div class="code-name">.icon-danxuankuang-shixiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Search"></span>
            <div class="name">
              Search
            </div>
            <div class="code-name">.icon-Search
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Warning-Circle-Fill"></span>
            <div class="name">
              Warning-Circle-Fill
            </div>
            <div class="code-name">.icon-Warning-Circle-Fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-duoxuankuang-xuanzhong"></span>
            <div class="name">
              多选框-选中
            </div>
            <div class="code-name">.icon-duoxuankuang-xuanzhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-duoxuankuang-shixiao"></span>
            <div class="name">
              多选框-失效
            </div>
            <div class="code-name">.icon-duoxuankuang-shixiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Warning-Circle-Line"></span>
            <div class="name">
              Warning-Circle-Line
            </div>
            <div class="code-name">.icon-Warning-Circle-Line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Sidebar-guanlizhongxin"></span>
            <div class="name">
              Sidebar-管理中心
            </div>
            <div class="code-name">.icon-Sidebar-guanlizhongxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Close-Circle-Line"></span>
            <div class="name">
              Close-Circle-Line
            </div>
            <div class="code-name">.icon-Close-Circle-Line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-duoxuankuang-xuanzhongshixiao"></span>
            <div class="name">
              多选框-选中失效
            </div>
            <div class="code-name">.icon-duoxuankuang-xuanzhongshixiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Sidebar-shezhizhongxin"></span>
            <div class="name">
              Sidebar-设置中心
            </div>
            <div class="code-name">.icon-Sidebar-shezhizhongxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Operation-Camera"></span>
            <div class="name">
              Operation-Camera
            </div>
            <div class="code-name">.icon-Operation-Camera
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Safe-Circle-Fill"></span>
            <div class="name">
              Safe-Circle-Fill
            </div>
            <div class="code-name">.icon-Safe-Circle-Fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-danxuankuang-weixuanzhong"></span>
            <div class="name">
              单选框-未选中
            </div>
            <div class="code-name">.icon-danxuankuang-weixuanzhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Operation-Check"></span>
            <div class="name">
              Operation-Check
            </div>
            <div class="code-name">.icon-Operation-Check
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-danxuankuang-xuanzhongshixiao"></span>
            <div class="name">
              单选框-选中失效
            </div>
            <div class="code-name">.icon-danxuankuang-xuanzhongshixiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Organize"></span>
            <div class="name">
              Organize
            </div>
            <div class="code-name">.icon-Organize
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Info-Circle-Line"></span>
            <div class="name">
              Info-Circle-Line
            </div>
            <div class="code-name">.icon-Info-Circle-Line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-duoxuankuang-xuanting"></span>
            <div class="name">
              多选框-悬停
            </div>
            <div class="code-name">.icon-duoxuankuang-xuanting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Sound-Harf"></span>
            <div class="name">
              Sound-Harf
            </div>
            <div class="code-name">.icon-Sound-Harf
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Sidebar-xuexizhongxin"></span>
            <div class="name">
              Sidebar-学习中心
            </div>
            <div class="code-name">.icon-Sidebar-xuexizhongxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Operation-Listen"></span>
            <div class="name">
              Operation-Listen
            </div>
            <div class="code-name">.icon-Operation-Listen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Sound-Off"></span>
            <div class="name">
              Sound-Off
            </div>
            <div class="code-name">.icon-Sound-Off
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Operation-Message"></span>
            <div class="name">
              Operation-Message
            </div>
            <div class="code-name">.icon-Operation-Message
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Sidebar-gongzuotai"></span>
            <div class="name">
              Sidebar-工作台
            </div>
            <div class="code-name">.icon-Sidebar-gongzuotai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Time-Circle-Fill"></span>
            <div class="name">
              Time-Circle-Fill
            </div>
            <div class="code-name">.icon-Time-Circle-Fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-danxuankuang-xuanting"></span>
            <div class="name">
              单选框-悬停
            </div>
            <div class="code-name">.icon-danxuankuang-xuanting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-duoxuankuang-weixuanzhong"></span>
            <div class="name">
              多选框-未选中
            </div>
            <div class="code-name">.icon-duoxuankuang-weixuanzhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Exclaimination"></span>
            <div class="name">
              Exclaimination
            </div>
            <div class="code-name">.icon-Exclaimination
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Question-Circle-Fill"></span>
            <div class="name">
              Question-Circle-Fill
            </div>
            <div class="code-name">.icon-Question-Circle-Fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Operation-Trajectory"></span>
            <div class="name">
              Operation-Trajectory
            </div>
            <div class="code-name">.icon-Operation-Trajectory
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Sidebar-peizhizhongxin"></span>
            <div class="name">
              Sidebar-配置中心
            </div>
            <div class="code-name">.icon-Sidebar-peizhizhongxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Operation-Siring"></span>
            <div class="name">
              Operation-Siring
            </div>
            <div class="code-name">.icon-Operation-Siring
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Sound-On"></span>
            <div class="name">
              Sound-On
            </div>
            <div class="code-name">.icon-Sound-On
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Sidebar-shujuzhongxin"></span>
            <div class="name">
              Sidebar-数据中心
            </div>
            <div class="code-name">.icon-Sidebar-shujuzhongxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Operation-Siri"></span>
            <div class="name">
              Operation-Siri
            </div>
            <div class="code-name">.icon-Operation-Siri
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Check-Circle-Fill"></span>
            <div class="name">
              Check-Circle-Fill
            </div>
            <div class="code-name">.icon-Check-Circle-Fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Operation-Mark"></span>
            <div class="name">
              Operation-Mark
            </div>
            <div class="code-name">.icon-Operation-Mark
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Check-Circle-Line"></span>
            <div class="name">
              Check-Circle-Line
            </div>
            <div class="code-name">.icon-Check-Circle-Line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Save"></span>
            <div class="name">
              Save
            </div>
            <div class="code-name">.icon-Save
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-danxuankuang-xuanzhong"></span>
            <div class="name">
              单选框-选中
            </div>
            <div class="code-name">.icon-danxuankuang-xuanzhong
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Driving"></use>
                </svg>
                <div class="name">Driving</div>
                <div class="code-name">#icon-Driving</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Parking"></use>
                </svg>
                <div class="name">Parking</div>
                <div class="code-name">#icon-Parking</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Stop"></use>
                </svg>
                <div class="name">Stop</div>
                <div class="code-name">#icon-Stop</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Suspend"></use>
                </svg>
                <div class="name">Suspend</div>
                <div class="code-name">#icon-Suspend</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Star"></use>
                </svg>
                <div class="name">Star</div>
                <div class="code-name">#icon-Star</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Close-Circle-Fill"></use>
                </svg>
                <div class="name">Close-Circle-Fill</div>
                <div class="code-name">#icon-Close-Circle-Fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Calendar"></use>
                </svg>
                <div class="name">Calendar</div>
                <div class="code-name">#icon-Calendar</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Set"></use>
                </svg>
                <div class="name">Set</div>
                <div class="code-name">#icon-Set</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-FolderSelected"></use>
                </svg>
                <div class="name">Folder Selected</div>
                <div class="code-name">#icon-a-FolderSelected</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Arrow"></use>
                </svg>
                <div class="name">Arrow</div>
                <div class="code-name">#icon-Arrow</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhatuche"></use>
                </svg>
                <div class="name">渣土车</div>
                <div class="code-name">#icon-zhatuche</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Folder"></use>
                </svg>
                <div class="name">Folder</div>
                <div class="code-name">#icon-Folder</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Hide"></use>
                </svg>
                <div class="name">Hide</div>
                <div class="code-name">#icon-Hide</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Direction"></use>
                </svg>
                <div class="name">Direction</div>
                <div class="code-name">#icon-Direction</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Show"></use>
                </svg>
                <div class="name">Show</div>
                <div class="code-name">#icon-Show</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weihuapinche"></use>
                </svg>
                <div class="name">危化品车</div>
                <div class="code-name">#icon-weihuapinche</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Open"></use>
                </svg>
                <div class="name">Open</div>
                <div class="code-name">#icon-Open</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lvyoubaoche"></use>
                </svg>
                <div class="name">旅游包车</div>
                <div class="code-name">#icon-lvyoubaoche</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Control"></use>
                </svg>
                <div class="name">Control</div>
                <div class="code-name">#icon-Control</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Fix"></use>
                </svg>
                <div class="name">Fix</div>
                <div class="code-name">#icon-Fix</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Menu-Unflod"></use>
                </svg>
                <div class="name">Menu-Unflod</div>
                <div class="code-name">#icon-Menu-Unflod</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Plus"></use>
                </svg>
                <div class="name">Plus</div>
                <div class="code-name">#icon-Plus</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Menu-Flod"></use>
                </svg>
                <div class="name">Menu-Flod</div>
                <div class="code-name">#icon-Menu-Flod</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Signal"></use>
                </svg>
                <div class="name">Signal</div>
                <div class="code-name">#icon-Signal</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Storage"></use>
                </svg>
                <div class="name">Storage</div>
                <div class="code-name">#icon-Storage</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-New-Windows"></use>
                </svg>
                <div class="name">New-Windows</div>
                <div class="code-name">#icon-New-Windows</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-DoubleRight1"></use>
                </svg>
                <div class="name">DoubleRight</div>
                <div class="code-name">#icon-DoubleRight1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Next"></use>
                </svg>
                <div class="name">Next</div>
                <div class="code-name">#icon-Next</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Auto"></use>
                </svg>
                <div class="name">Auto</div>
                <div class="code-name">#icon-Auto</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Parameter"></use>
                </svg>
                <div class="name">Parameter</div>
                <div class="code-name">#icon-Parameter</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Management"></use>
                </svg>
                <div class="name">Management</div>
                <div class="code-name">#icon-Management</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Trush"></use>
                </svg>
                <div class="name">Trush</div>
                <div class="code-name">#icon-Trush</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-No-Signal"></use>
                </svg>
                <div class="name">No-Signal</div>
                <div class="code-name">#icon-No-Signal</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Dashboard"></use>
                </svg>
                <div class="name">Dashboard</div>
                <div class="code-name">#icon-Dashboard</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Last"></use>
                </svg>
                <div class="name">Last</div>
                <div class="code-name">#icon-Last</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bluetooth-On"></use>
                </svg>
                <div class="name">bluetooth-On</div>
                <div class="code-name">#icon-bluetooth-On</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-DoubleLeft"></use>
                </svg>
                <div class="name">DoubleLeft</div>
                <div class="code-name">#icon-DoubleLeft</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shezhi"></use>
                </svg>
                <div class="name">设置</div>
                <div class="code-name">#icon-shezhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shipin"></use>
                </svg>
                <div class="name">视频</div>
                <div class="code-name">#icon-shipin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gongju"></use>
                </svg>
                <div class="name">工具</div>
                <div class="code-name">#icon-gongju</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Time-Circle-Line"></use>
                </svg>
                <div class="name">Time-Circle-Line</div>
                <div class="code-name">#icon-Time-Circle-Line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-banxiankeche"></use>
                </svg>
                <div class="name">班线客车</div>
                <div class="code-name">#icon-banxiankeche</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Window"></use>
                </svg>
                <div class="name">Window</div>
                <div class="code-name">#icon-Window</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Down"></use>
                </svg>
                <div class="name">Down</div>
                <div class="code-name">#icon-Down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Car"></use>
                </svg>
                <div class="name">Car</div>
                <div class="code-name">#icon-Car</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-File"></use>
                </svg>
                <div class="name">File</div>
                <div class="code-name">#icon-File</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Bluetooth"></use>
                </svg>
                <div class="name">Bluetooth</div>
                <div class="code-name">#icon-Bluetooth</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Up"></use>
                </svg>
                <div class="name">Up</div>
                <div class="code-name">#icon-Up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Wi-Fi"></use>
                </svg>
                <div class="name">Wi-Fi</div>
                <div class="code-name">#icon-Wi-Fi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ACC"></use>
                </svg>
                <div class="name">ACC</div>
                <div class="code-name">#icon-ACC</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baojing"></use>
                </svg>
                <div class="name">报警</div>
                <div class="code-name">#icon-baojing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-left"></use>
                </svg>
                <div class="name">left</div>
                <div class="code-name">#icon-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Drive"></use>
                </svg>
                <div class="name">Drive</div>
                <div class="code-name">#icon-Drive</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lukuang"></use>
                </svg>
                <div class="name">路况</div>
                <div class="code-name">#icon-lukuang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Video"></use>
                </svg>
                <div class="name">Video</div>
                <div class="code-name">#icon-Video</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Link"></use>
                </svg>
                <div class="name">Link</div>
                <div class="code-name">#icon-Link</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chezhong"></use>
                </svg>
                <div class="name">车种</div>
                <div class="code-name">#icon-chezhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Sort-Up"></use>
                </svg>
                <div class="name">Sort-Up</div>
                <div class="code-name">#icon-Sort-Up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Power-Off"></use>
                </svg>
                <div class="name">Power-Off</div>
                <div class="code-name">#icon-Power-Off</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Right"></use>
                </svg>
                <div class="name">Right</div>
                <div class="code-name">#icon-Right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quhua"></use>
                </svg>
                <div class="name">区划</div>
                <div class="code-name">#icon-quhua</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-More"></use>
                </svg>
                <div class="name">More</div>
                <div class="code-name">#icon-More</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Sort-Down"></use>
                </svg>
                <div class="name">Sort-Down</div>
                <div class="code-name">#icon-Sort-Down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Sort"></use>
                </svg>
                <div class="name">Sort</div>
                <div class="code-name">#icon-Sort</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Question-Circle-Line"></use>
                </svg>
                <div class="name">Question-Circle-Line</div>
                <div class="code-name">#icon-Question-Circle-Line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Cycle"></use>
                </svg>
                <div class="name">Cycle</div>
                <div class="code-name">#icon-Cycle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Change-People"></use>
                </svg>
                <div class="name">Change-People</div>
                <div class="code-name">#icon-Change-People</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Options"></use>
                </svg>
                <div class="name">Options</div>
                <div class="code-name">#icon-Options</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Scan"></use>
                </svg>
                <div class="name">Scan</div>
                <div class="code-name">#icon-Scan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Change-Car"></use>
                </svg>
                <div class="name">Change-Car</div>
                <div class="code-name">#icon-Change-Car</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-plus-square"></use>
                </svg>
                <div class="name">plus-square</div>
                <div class="code-name">#icon-plus-square</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Web"></use>
                </svg>
                <div class="name">Web</div>
                <div class="code-name">#icon-Web</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Delete"></use>
                </svg>
                <div class="name">Delete</div>
                <div class="code-name">#icon-Delete</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Share"></use>
                </svg>
                <div class="name">Share</div>
                <div class="code-name">#icon-Share</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Editor"></use>
                </svg>
                <div class="name">Editor</div>
                <div class="code-name">#icon-Editor</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Attachment"></use>
                </svg>
                <div class="name">Attachment</div>
                <div class="code-name">#icon-Attachment</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Lock-Unlock"></use>
                </svg>
                <div class="name">Lock-Unlock</div>
                <div class="code-name">#icon-Lock-Unlock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Edit"></use>
                </svg>
                <div class="name">Edit</div>
                <div class="code-name">#icon-Edit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Lock"></use>
                </svg>
                <div class="name">Lock</div>
                <div class="code-name">#icon-Lock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Message"></use>
                </svg>
                <div class="name">Message</div>
                <div class="code-name">#icon-Message</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Lock-Lock"></use>
                </svg>
                <div class="name">Lock-Lock</div>
                <div class="code-name">#icon-Lock-Lock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Container"></use>
                </svg>
                <div class="name">Container</div>
                <div class="code-name">#icon-Container</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-User"></use>
                </svg>
                <div class="name">User</div>
                <div class="code-name">#icon-User</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-QRCode"></use>
                </svg>
                <div class="name">QR Code</div>
                <div class="code-name">#icon-a-QRCode</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Phone"></use>
                </svg>
                <div class="name">Phone</div>
                <div class="code-name">#icon-Phone</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Member-Group"></use>
                </svg>
                <div class="name">Member-Group</div>
                <div class="code-name">#icon-Member-Group</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Download"></use>
                </svg>
                <div class="name">Download</div>
                <div class="code-name">#icon-Download</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Member-minus"></use>
                </svg>
                <div class="name">Member-minus</div>
                <div class="code-name">#icon-Member-minus</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Reminder"></use>
                </svg>
                <div class="name">Reminder</div>
                <div class="code-name">#icon-Reminder</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Mail"></use>
                </svg>
                <div class="name">Mail</div>
                <div class="code-name">#icon-Mail</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Upload"></use>
                </svg>
                <div class="name">Upload</div>
                <div class="code-name">#icon-Upload</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Member"></use>
                </svg>
                <div class="name">Member</div>
                <div class="code-name">#icon-Member</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Member-Plus"></use>
                </svg>
                <div class="name">Member-Plus</div>
                <div class="code-name">#icon-Member-Plus</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Reload"></use>
                </svg>
                <div class="name">Reload</div>
                <div class="code-name">#icon-Reload</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-VideoSelected"></use>
                </svg>
                <div class="name">Video Selected</div>
                <div class="code-name">#icon-a-VideoSelected</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Change"></use>
                </svg>
                <div class="name">Change</div>
                <div class="code-name">#icon-Change</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-LocationUnselected"></use>
                </svg>
                <div class="name">Location Unselected</div>
                <div class="code-name">#icon-a-LocationUnselected</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Close"></use>
                </svg>
                <div class="name">Close</div>
                <div class="code-name">#icon-Close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-VideoUnselected"></use>
                </svg>
                <div class="name">Video Unselected</div>
                <div class="code-name">#icon-a-VideoUnselected</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-StarUnselected"></use>
                </svg>
                <div class="name">Star Unselected</div>
                <div class="code-name">#icon-a-StarUnselected</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-LocationSelected"></use>
                </svg>
                <div class="name">Location Selected</div>
                <div class="code-name">#icon-a-LocationSelected</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-StarSelected"></use>
                </svg>
                <div class="name">Star Selected</div>
                <div class="code-name">#icon-a-StarSelected</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-DoubleRight"></use>
                </svg>
                <div class="name">DoubleRight</div>
                <div class="code-name">#icon-DoubleRight</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Warning-Circle-Fill1"></use>
                </svg>
                <div class="name">Warning-Circle-Fill</div>
                <div class="code-name">#icon-Warning-Circle-Fill1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-duoxuankuang-bufenxuanzhong"></use>
                </svg>
                <div class="name">多选框-部分选中</div>
                <div class="code-name">#icon-duoxuankuang-bufenxuanzhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Sidebar-yujingzhongxin"></use>
                </svg>
                <div class="name">Sidebar-预警中心</div>
                <div class="code-name">#icon-Sidebar-yujingzhongxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Info-Circle-Fill"></use>
                </svg>
                <div class="name">Info-Circle-Fill</div>
                <div class="code-name">#icon-Info-Circle-Fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Check"></use>
                </svg>
                <div class="name">Check</div>
                <div class="code-name">#icon-Check</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Sidebar-jiankongzhongxin"></use>
                </svg>
                <div class="name">Sidebar-监控中心</div>
                <div class="code-name">#icon-Sidebar-jiankongzhongxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-danxuankuang-shixiao"></use>
                </svg>
                <div class="name">单选框-失效</div>
                <div class="code-name">#icon-danxuankuang-shixiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Search"></use>
                </svg>
                <div class="name">Search</div>
                <div class="code-name">#icon-Search</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Warning-Circle-Fill"></use>
                </svg>
                <div class="name">Warning-Circle-Fill</div>
                <div class="code-name">#icon-Warning-Circle-Fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-duoxuankuang-xuanzhong"></use>
                </svg>
                <div class="name">多选框-选中</div>
                <div class="code-name">#icon-duoxuankuang-xuanzhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-duoxuankuang-shixiao"></use>
                </svg>
                <div class="name">多选框-失效</div>
                <div class="code-name">#icon-duoxuankuang-shixiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Warning-Circle-Line"></use>
                </svg>
                <div class="name">Warning-Circle-Line</div>
                <div class="code-name">#icon-Warning-Circle-Line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Sidebar-guanlizhongxin"></use>
                </svg>
                <div class="name">Sidebar-管理中心</div>
                <div class="code-name">#icon-Sidebar-guanlizhongxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Close-Circle-Line"></use>
                </svg>
                <div class="name">Close-Circle-Line</div>
                <div class="code-name">#icon-Close-Circle-Line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-duoxuankuang-xuanzhongshixiao"></use>
                </svg>
                <div class="name">多选框-选中失效</div>
                <div class="code-name">#icon-duoxuankuang-xuanzhongshixiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Sidebar-shezhizhongxin"></use>
                </svg>
                <div class="name">Sidebar-设置中心</div>
                <div class="code-name">#icon-Sidebar-shezhizhongxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Operation-Camera"></use>
                </svg>
                <div class="name">Operation-Camera</div>
                <div class="code-name">#icon-Operation-Camera</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Safe-Circle-Fill"></use>
                </svg>
                <div class="name">Safe-Circle-Fill</div>
                <div class="code-name">#icon-Safe-Circle-Fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-danxuankuang-weixuanzhong"></use>
                </svg>
                <div class="name">单选框-未选中</div>
                <div class="code-name">#icon-danxuankuang-weixuanzhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Operation-Check"></use>
                </svg>
                <div class="name">Operation-Check</div>
                <div class="code-name">#icon-Operation-Check</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-danxuankuang-xuanzhongshixiao"></use>
                </svg>
                <div class="name">单选框-选中失效</div>
                <div class="code-name">#icon-danxuankuang-xuanzhongshixiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Organize"></use>
                </svg>
                <div class="name">Organize</div>
                <div class="code-name">#icon-Organize</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Info-Circle-Line"></use>
                </svg>
                <div class="name">Info-Circle-Line</div>
                <div class="code-name">#icon-Info-Circle-Line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-duoxuankuang-xuanting"></use>
                </svg>
                <div class="name">多选框-悬停</div>
                <div class="code-name">#icon-duoxuankuang-xuanting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Sound-Harf"></use>
                </svg>
                <div class="name">Sound-Harf</div>
                <div class="code-name">#icon-Sound-Harf</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Sidebar-xuexizhongxin"></use>
                </svg>
                <div class="name">Sidebar-学习中心</div>
                <div class="code-name">#icon-Sidebar-xuexizhongxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Operation-Listen"></use>
                </svg>
                <div class="name">Operation-Listen</div>
                <div class="code-name">#icon-Operation-Listen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Sound-Off"></use>
                </svg>
                <div class="name">Sound-Off</div>
                <div class="code-name">#icon-Sound-Off</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Operation-Message"></use>
                </svg>
                <div class="name">Operation-Message</div>
                <div class="code-name">#icon-Operation-Message</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Sidebar-gongzuotai"></use>
                </svg>
                <div class="name">Sidebar-工作台</div>
                <div class="code-name">#icon-Sidebar-gongzuotai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Time-Circle-Fill"></use>
                </svg>
                <div class="name">Time-Circle-Fill</div>
                <div class="code-name">#icon-Time-Circle-Fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-danxuankuang-xuanting"></use>
                </svg>
                <div class="name">单选框-悬停</div>
                <div class="code-name">#icon-danxuankuang-xuanting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-duoxuankuang-weixuanzhong"></use>
                </svg>
                <div class="name">多选框-未选中</div>
                <div class="code-name">#icon-duoxuankuang-weixuanzhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Exclaimination"></use>
                </svg>
                <div class="name">Exclaimination</div>
                <div class="code-name">#icon-Exclaimination</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Question-Circle-Fill"></use>
                </svg>
                <div class="name">Question-Circle-Fill</div>
                <div class="code-name">#icon-Question-Circle-Fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Operation-Trajectory"></use>
                </svg>
                <div class="name">Operation-Trajectory</div>
                <div class="code-name">#icon-Operation-Trajectory</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Sidebar-peizhizhongxin"></use>
                </svg>
                <div class="name">Sidebar-配置中心</div>
                <div class="code-name">#icon-Sidebar-peizhizhongxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Operation-Siring"></use>
                </svg>
                <div class="name">Operation-Siring</div>
                <div class="code-name">#icon-Operation-Siring</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Sound-On"></use>
                </svg>
                <div class="name">Sound-On</div>
                <div class="code-name">#icon-Sound-On</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Sidebar-shujuzhongxin"></use>
                </svg>
                <div class="name">Sidebar-数据中心</div>
                <div class="code-name">#icon-Sidebar-shujuzhongxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Operation-Siri"></use>
                </svg>
                <div class="name">Operation-Siri</div>
                <div class="code-name">#icon-Operation-Siri</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Check-Circle-Fill"></use>
                </svg>
                <div class="name">Check-Circle-Fill</div>
                <div class="code-name">#icon-Check-Circle-Fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Operation-Mark"></use>
                </svg>
                <div class="name">Operation-Mark</div>
                <div class="code-name">#icon-Operation-Mark</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Check-Circle-Line"></use>
                </svg>
                <div class="name">Check-Circle-Line</div>
                <div class="code-name">#icon-Check-Circle-Line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Save"></use>
                </svg>
                <div class="name">Save</div>
                <div class="code-name">#icon-Save</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-danxuankuang-xuanzhong"></use>
                </svg>
                <div class="name">单选框-选中</div>
                <div class="code-name">#icon-danxuankuang-xuanzhong</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
